<template>
    <div class="timer-DayHMSM">
        <div
            class="timer"
            v-if="Object.keys(timer).length > 0"
        >
            <span class="timer-description">{{timerMsg.description}}</span>
            <span class="time-boxs">
                <span
                    class="time-day"
                    v-if="timerMsg.showTime.day"
                >
                    <span class="time-box">{{timer.day}}</span>
                    <span class="time-unit">{{timerMsg.timeSymbol || '天'}}</span>
                </span>
                <span
                    class="time-hour1"
                    v-if="timerMsg.showTime.hour"
                >
                    <span class="time-box">{{timer.hour1}}</span>
                    <span class="time-unit">{{timerMsg.timeSymbol || '时'}}</span>
                </span>
                <span
                    class="time-minute"
                    v-if="timerMsg.showTime.minute"
                >
                    <span class="time-box">{{timer.minute}}</span>
                    <span class="time-unit">{{timerMsg.timeSymbol || '分'}}</span>
                </span>
                <span
                    class="time-second"
                    v-if="timerMsg.showTime.second"
                >
                    <span class="time-box">{{timer.second}}</span>
                    <span class="time-unit">{{timerMsg.timeSymbol || '秒'}}</span>
                </span>
                <span v-if="timerMsg.showTime.ms">
                    <span
                        class="time-box"
                        v-if="timerMsg.needMs"
                    >{{timer.ms}}</span>
                </span>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: "DayHMSM",
    props: {
        timerProp: Object
    },
    data () {
        return {
            timerMsg: {
                needMs: true,
                description: '',
                showTime: {
                    day: true,
                    hour: true,
                    minute: true,
                    second: true,
                    ms: true,
                },
                expStartTime: 0,//预期开启时间//距离活动开启时间
                timeSymbol: ''
            },
            timer: {},
            timerInterval: null,
        }
    },
    mounted () {
        this.timerMsg = Object.assign({}, this.timerMsg, this.timerProp);
        console.log(this.timerMsg, 'this.timerMsg');

        this.countDown();
    },
    methods: {
        countDown () {
            let that = this;
            let reduceTime = 100;
            if (!this.timerMsg.needMs) {
                reduceTime = 1000
            }
            this.timerInterval = setInterval(() => {
                that.timer = Object.assign({}, that.timeCountDown(that.timerMsg.expStartTime));
                that.timerMsg.expStartTime -= reduceTime;
                if (that.timerMsg.expStartTime <= 0) {
                    that.$emit('endTime');
                    that.$emit('getPageFrame');
                    clearInterval(that.timerInterval);
                }
            }, reduceTime)
        }
    },
    watch: {
        timerProp (val) {
            this.timerMsg = Object.assign({}, this.timerMsg, val);
        }
    }
}
</script>

<style scoped>
.time-box {
    display: inline-block;
    background-color: #413d3c;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    min-width: 0.25rem;
    padding: 0 0.02rem;
    height: 0.25rem;
    text-align: center;
    line-height: 0.25rem;
}

.timer {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.11rem;
    white-space: nowrap;
    padding-left: 0.3rem;
    color: #fff;
}

.time-boxs {
    padding-left: 0.13rem;
    color: #333;
}
</style>